import React, { Component } from 'react';
import {
  Text,
  View,
  Button
} from 'react-native';
import { StackNavigator} from 'react-navigation';

export default class ProfileScreen extends React.Component{
   static navigationOptions=({navigation})=>({
     title:'Profile ${navigation.state.params.user}',
   });

   render(){
     const {navigate}=this.props.navigation;
     const {params}=this.props.navigation.state;

     return(
       <View style={{flex:1,flexDirection:'column'}}>
       <Text>{params.user}</Text>
       <Button 
        onPress={()=>navigate('Input',{user:'Jack'})}
        title='跳转到InputScreen'
       />
       <Button 
        onPress={()=>navigate('Timer',{user:'Jack'})}
        title='跳转到TimerScreen'
       />
       <View style={{
         flexDirection:'row',
         flex:1,
//         justifyContent:'space-between'
//         justifyContent:'flex-start'
 //        justifyContent:'flex-end'
          justifyContent:'center',
 //       justifyContent:'space-around'
  //        alignItems:'center' 
  //        alignItems:'flex-start'
  //         alignItems:'flex-end'
           alignItems:'stretch'
       }}>
        {/* <View style={{width:50,height:50,backgroundColor:'powderblue'}}></View>
        <View style={{width:70,height:70,backgroundColor:'skyblue'}}></View>
        <View style={{width:100,height:100,backgroundColor:'steelblue'}}></View> */}

        <View style={{width:50,backgroundColor:'powderblue'}}></View>
        <View style={{width:70,backgroundColor:'skyblue'}}></View>
        <View style={{width:100,backgroundColor:'steelblue'}}></View>
        </View>
        <View style={{
          flex:1,
          flexDirection:'row',
          }}>
        <View style={{flex:1,backgroundColor:'powderblue'}}></View>
        <View style={{flex:2,backgroundColor:'skyblue'}}></View>
        <View style={{flex:3,backgroundColor:'steelblue'}}></View>
        </View>
       </View>
     );
   }
}